<template>
  <div class="dashboard-editor-container">

    <panel-group @handleSetLineChartData="handleSetLineChartData" />

    <el-row :gutter="32">
<!--      :xs="24" :sm="24" :lg="16"-->
      <el-col style="width:60%">
        <div class="chart-wrapper" style="background:#fff;padding:0px 16px 0;margin-bottom:32px;height:380px">
          <div>
            <div>
              <el-tabs v-model="active" @tab-click="handleClick">
                <el-tab-pane label="销售额" name="sale">
                  <div style="width: 98%">
<!--                    <span style="padding-bottom: 10px">销售趋势</span>-->

                  </div>

                </el-tab-pane>
                <el-tab-pane label="接单数" name="receive">
<!--                  接单数-->
                </el-tab-pane>
              </el-tabs>
              <bar-chart ref="chartBar" :data="chartData" />
              <div style="position: absolute;top: 8px;left: 17%">
                <el-tag effect="plain" style="margin-right: 6px" @click="editModel" :type="model == 'day' ? 'success' : 'info'">日</el-tag>
                <el-tag style="margin-right: 6px" @click="editModel" :type="model == 'week' ? 'success' : 'info'">周</el-tag>
                <el-tag style="margin-right: 6px" @click="editModel" :type="model == 'month' ? 'success' : 'info'">月</el-tag>
                <el-tag style="margin-right: 6px" @click="editModel" :type="model == 'year' ? 'success' : 'info'">年</el-tag>
                <el-tag style="margin-right: 6px" @click="editModel" :type="model == 'area' ? 'success' : 'info'">区</el-tag>
<!--                <el-radio-group v-model="radio1" size="mini">-->
<!--                  <el-radio-button label="日"></el-radio-button>-->
<!--                  <el-radio-button label="周"></el-radio-button>-->
<!--                  <el-radio-button label="广"></el-radio-button>-->
<!--                  <el-radio-button label="深"></el-radio-button>-->
<!--                  <el-radio-button label="深"></el-radio-button>-->
<!--                </el-radio-group>-->
                <el-date-picker
                  v-model="startDate"
                  style="width: 130px"
                  type="date"
                  size="mini"
                  placeholder="请选择开始日期"
                  :picker-options="pickerOptions"
                  value-format="yyyy-MM-dd"
                  @change="changeStartDate"
                  align="right">
                </el-date-picker>
                <el-date-picker
                  v-model="endDate"
                  style="width: 130px;margin-left: 5px"
                  type="date"
                  size="mini"
                  value-format="yyyy-MM-dd"
                  @change="changeEndDate"
                  placeholder="请选择结束日期"
                  align="right">
                </el-date-picker>
              </div>
            </div>
          </div>

<!--          <line-chart :chart-data="lineChartData" />-->
        </div>
      </el-col>
      <el-col style="width:40%">
        <div class="chart-wrapper" style="background:#fff;padding:0px 16px 0;margin-bottom:32px;height:380px">
          <el-tabs v-model="activeName">
            <el-tab-pane label="人员业绩排名" name="first">
              <div style="width: 98%">
                <div>
                  <div v-for="(item, index) in personList" style="display: flex;justify-content: space-between;margin-bottom: 12px">
                    <div style="display: inline-flex;vertical-align: center">
                      <div style="text-align: center;color:white;width:18px;height:18px;border-radius: 50%;background-color: #317FF1">1</div>
                      <i style="padding-left: 24px" class="el-icon-s-custom"></i>
                      <span style="font-size: 14px;padding-left: 6px">{{item.nick_name}}{{`  [${item.orderNum}单]`}}</span>
                    </div>
                    <div>
                      <span>{{item.orderPrice || 0}}元</span>
                    </div>
                  </div>

<!--                  <div style="display: flex;justify-content: space-between;margin-bottom: 12px">-->
<!--                    <div style="display: inline-flex;vertical-align: center">-->
<!--                      <div style="text-align: center;color:white;width:18px;height:18px;border-radius: 50%;background-color: #317FF1">2</div>-->
<!--                      <i style="padding-left: 24px" class="el-icon-s-custom"></i>-->
<!--                      <span style="font-size: 14px;padding-left: 6px">王小虎</span>-->
<!--                    </div>-->
<!--                    <div>-->
<!--                      <span>204</span>-->
<!--                    </div>-->
<!--                  </div>-->

<!--                  <div style="display: flex;justify-content: space-between;margin-bottom: 12px">-->
<!--                    <div style="display: inline-flex;vertical-align: center">-->
<!--                      <div style="text-align: center;color:white;width:18px;height:18px;border-radius: 50%;background-color: #317FF1">3</div>-->
<!--                      <i style="padding-left: 24px" class="el-icon-s-custom"></i>-->
<!--                      <span style="font-size: 14px;padding-left: 6px">张小龟</span>-->
<!--                    </div>-->
<!--                    <div>-->
<!--                      <span>198</span>-->
<!--                    </div>-->
<!--                  </div>-->

<!--                  <div style="display: flex;justify-content: space-between;margin-bottom: 12px">-->
<!--                    <div style="display: inline-flex;vertical-align: center">-->
<!--                      <div style="text-align: center;color:white;width:18px;height:18px;border-radius: 50%;background-color: #8799a3">4</div>-->
<!--                      <i style="padding-left: 24px" class="el-icon-s-custom"></i>-->
<!--                      <span style="font-size: 14px;padding-left: 6px">张亮</span>-->
<!--                    </div>-->
<!--                    <div>-->
<!--                      <span>167</span>-->
<!--                    </div>-->
<!--                  </div>-->

<!--                  <div style="display: flex;justify-content: space-between;margin-bottom: 12px">-->
<!--                    <div style="display: inline-flex;vertical-align: center">-->
<!--                      <div style="text-align: center;color:white;width:18px;height:18px;border-radius: 50%;background-color: #8799a3">5</div>-->
<!--                      <i style="padding-left: 24px" class="el-icon-s-custom"></i>-->
<!--                      <span style="font-size: 14px;padding-left: 6px">张楚岚</span>-->
<!--                    </div>-->
<!--                    <div>-->
<!--                      <span>149</span>-->
<!--                    </div>-->
<!--                  </div>-->

                </div>
               <div>
               </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="32">
      <el-col style="width:60%">
        <div class="chart-wrapper" style="background:#fff;padding:16px 16px 0;margin-bottom:32px;height:450px">
          <el-tabs v-model="activeName">
            <el-tab-pane label="工单动态" name="first">
              <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column width="180" label="工单编号" align="center" prop="customerKey" />
                <el-table-column width="120" label="服务类别" align="center" prop="customerHelp" />
                <el-table-column label="工单状态" align="center" prop="workOrderStatus">
                  <template slot-scope="scope">
                    <dict-tag :options="dict.type.sys_flag" :value="scope.row.customerFlag"/>
                  </template>
                </el-table-column>
              </el-table>
              <pagination
                v-show="total > 0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"
              />
            </el-tab-pane>
          </el-tabs>
        </div>
<!--        <div class="chart-wrapper"></div>-->
      </el-col>
      <el-col style="width:40%">
        <div class="chart-wrapper" style="background:#fff;padding:16px 16px 0;margin-bottom:32px;height:450px">
          <div>
            <el-tabs v-model="activeName">
              <el-tab-pane label="业务类别占比" name="first">
<!--                <span>业务总销售额</span>-->
              </el-tab-pane>
            </el-tabs>
          </div>
          <pie-chart />
        </div>
      </el-col>
    </el-row>
<!--    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">-->
<!--      <line-chart :chart-data="lineChartData" />-->
<!--    </el-row>-->

<!--    <el-row :gutter="32">-->
<!--      <el-col :xs="24" :sm="24" :lg="8">-->
<!--        <div class="chart-wrapper">-->
<!--          <raddar-chart />-->
<!--        </div>-->
<!--      </el-col>-->
<!--      <el-col :xs="24" :sm="24" :lg="8">-->
<!--        <div class="chart-wrapper">-->
<!--          <pie-chart />-->
<!--        </div>-->
<!--      </el-col>-->
<!--      <el-col :xs="24" :sm="24" :lg="8">-->
<!--        <div class="chart-wrapper">-->
<!--          <bar-chart />-->
<!--        </div>-->
<!--      </el-col>-->
<!--    </el-row>-->


  </div>
</template>

<script>
import moment from 'moment'
import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart'
import RaddarChart from './dashboard/RaddarChart'
import PieChart from './dashboard/PieChart'
import BarChart from './dashboard/BarChart'
import { listCustomerRepair } from '@/api/web/CustomerRepair'
import { getTrendChart, performance } from '@/api'

const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145]
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
}

export default {
  name: 'Index',
  dicts: ['sys_flag','sys_fp'],
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart
  },
  data() {
    return {
      personList: [], // 人员业绩
      lineChartData: lineChartData.newVisitis,
      activeName: 'first',
      active: 'sale',
      tableData: [],
      queryParams: {
        pageNum: 1,
        pageSize: 4,
      },
      total: 0,
      type: 1,
      modelName: '日',
      model: 'day',
      tabName: '销售额',
      chartData: [],
      startDate: moment().subtract(15, 'day').format('YYYY-MM-DD'),
      endDate: moment().format('YYYY-MM-DD'),
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }, {
          text: '一月前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', date);
          }
        }, {
          text: '一年前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 365);
            picker.$emit('pick', date);
          }
        }]
      },
    }
  },
  created() {
    this.getList()
    this.getTrendCharts()
    this.getPerformance()
  },
  methods: {
    /** 查询客户报修抢修列表 */
    getList(query) {
      // console.log(this.queryParams)
      // console.log(query)
      this.loading = true;
      listCustomerRepair(this.queryParams).then((response) => {
        console.log(response, '111')
        this.tableData = response.rows;
        this.total = response.total;
        // this.loading = false;
      });
    },
    getTrendCharts() {
      let params={
        type: this.type,
        model: this.model,
        startDate: this.startDate,
        endDate: moment(this.endDate).add(1, 'day').format('YYYY-MM-DD')
      }
      console.log(this.date, params)
      getTrendChart(params).then(res => {
        this.chartData = res.data
        console.log(res)
        this.$refs.chartBar.initChart(this.chartData, this.modelName, this.tabName)
      })
    },
    // 获取人员业绩排名
    getPerformance() {
      performance().then(res => {
        this.personList = res.data
        console.log(res)
        // this.$refs.chartBar.initChart(this.chartData, this.modelName, this.tabName)
      })
    },
    handleClick(tab, event) {
      // console.log(tab, event.target.innerHTML);
      const text = event.target.innerHTML;
      this.tabName = text
      switch (text) {
        case '接单数':
          this.active = 'receive';
          this.type = 2;
          break;
        case '销售额':
          this.active = 'sale';
          this.type = 1;
          break;
      }
      this.getTrendCharts()
    },
    editModel(event) {
      console.log(event)
      const text = event.target.innerHTML;
      this.modelName = text;
      switch (text) {
        case '日':
          this.model = 'day';
          break;
        case '周':
          this.model = 'week';
          break;
        case '月':
          this.model = 'month';
          break;
        case '年':
          this.model = 'year';
          break;
        case '区':
          this.model = 'area';
          break;
      }
      this.getTrendCharts()
    },
    changeStartDate(value) {
      // console.log(value)
      this.getTrendCharts()
    },
    changeEndDate(value) {
      this.getTrendCharts()
    },
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type]
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 10px 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    //padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}

::v-deep .dashboard-editor-container .el-tabs__item {
  padding: 0 10px;
}
::v-deep .dashboard-editor-container .el-radio-button--mini .el-radio-button__inner {
  padding: 7px;
}
///deep/ .el-tabs__item {
//  padding: 0 10px;
//  font-size: 12px;
//}
</style>
